<template>
	<view class="flex-row">
		<view @tap="toDetail" class="chat-message-card" :class="{reverse: isReverse && isSenderThemselve}">
			<view class="chat-message-card-header flex-row">
				<view class="text-ellipsis">订单号：{{ messageContent?.data?.orderNo }}</view>
			</view>
			<view class="wrap flex-row">
				<view class="image flex-column">
					<image class="cover" :src="messageContent?.data?.imageUrl" mode="scaleToFill"></image>
				</view>
				<view class="chat-message-card-info">
					<view class="title" v-html="messageContent?.data?.name"></view>
					<view class="price flex-row">
						<text class="unit">￥</text>
						<text class="value">{{ messageContent?.data?.amount }}</text>
						<view class="quantity" v-if="messageContent?.data?.quantity">x{{ messageContent?.data?.quantity }}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { messageProps, useMessage } from '@/hooks/useMessage'

const props = defineProps(messageProps)
const { isSenderThemselve, messageContent } = useMessage(props)

// 详情
function toDetail() {
	// 当前数据
	const message = props.message	// 消息数据
	const order = messageContent.value?.data	// 订单数据
	
	// 页面跳转：根据需要选择页面跳转方式
	console.log(order, message)
}
</script>

<style lang="scss" scoped>
.chat-message-card {
	flex: 1;
	color: #333;
	padding: 20rpx;
	cursor: pointer;
	width: fit-content;
	max-width: 700rpx;
	background-color: #fff;
	align-items: flex-start;
	border-radius: 0 10rpx 10rpx 10rpx;

	&-header {
		color: #333;
		font-size: 22rpx;
		margin-bottom: 20rpx;
	}

	.wrap {
		overflow: hidden;
		padding: 10rpx 16rpx;
		border-radius: 6rpx;
		background: #F7F7F7;
	}

	.image {
		background: #fff;
		margin-right: 20rpx;
		@include fullsize(110rpx);

		.cover {
			@include fullsize();
		}
	}

	&-info {
		width: calc(100% - 130rpx);

		.price {
			font-size: 24rpx;
			font-weight: normal;
			align-items: flex-end;
			justify-content: flex-start;

			.unit {
				color: var(--theme-color);
			}

			.value {
				color: var(--theme-color);
				font-size: 28rpx;
				font-weight: bold;
				transform: translateY(2rpx);
			}

			.quantity {
				color: #666;
				margin-left: auto;
			}
		}

		.title {
			font-size: 26rpx;
			margin-bottom: 10rpx;
			@include text-ellipsis();
		}
	}
}
</style>